<template>
    <view class="container">
        <u-navbar
            title="发布包车游线路"
            title-color="black"
            title-size="20px"
            back-icon-color="black"
        ></u-navbar>
        <u-form :model="formData" :rules="rules" ref="formRef" label-width="200">
            <!-- 线路缩略图 -->
            <u-form-item
                label="线路缩略图"
                prop="images"
                borderBottom
                label-position="top"
                right-icon="arrow-right"
            >
                <u-upload
                    :action="uploadUrl"
                    :max-count="2"
                    :model-value="formData.images"
                    @success="handleImageSuccess"
                    @delete="handleImageDelete"
                    :show-progress="false"
                ></u-upload>
            </u-form-item>

            <!-- 线路名称 -->
            <u-form-item label="名称线路" prop="title" borderBottom>
                <u-input v-model="formData.title" placeholder="请输入线路名称" />
            </u-form-item>

            <!-- 日期与价格 -->
            <u-form-item label="出行日期" prop="dates" borderBottom label-position="top" class="flex">
                <view
                    v-for="(item, index) in formData.dates"
                    :key="index"
                    class="date-price-item column justify-between"
                >
                    <u-field placeholder="请选择日期" right-icon="arrow-right">
                        <u-picker
                            mode="time"
                            v-model="item.date"
                            @change="(val) => (item.date = val)"
                            :show-year="true"
                            :show-time="false"
                        ></u-picker>
                    </u-field>
                    <u-field>
                        <u-input v-model="item.price" type="digit" placeholder="请输入价格" />
                    </u-field>
                    <view class="date-price-actions">
                        <u-icon
                            v-if="formData.dates.length > 1"
                            name="minus-circle"
                            @click="removeDate(index)"
                            size="36"
                            color="#fa3534"
                        ></u-icon>
                        <u-icon name="plus" @click="addDate" size="36" color="#2979ff"></u-icon>
                    </view>
                </view>
            </u-form-item>

            <!-- 富文本描述 -->
            <u-form-item label="线路详情" prop="content" borderBottom>
                <u-editor v-model="formData.content" :settings="editorSettings"></u-editor>
            </u-form-item>

            <!-- 提交按钮 -->
            <u-button @click="submit" type="success" class="commit_btn" block>提交审核</u-button>
        </u-form>
    </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import UNavbar from '@/uni_modules/vk-uview-ui/components/u-navbar/u-navbar.vue'
// import { uniService } from '@/api/request' // 替换为你的接口服务

const formRef = ref()
const uploadUrl = ref('https://your-api.com/upload') // 替换为实际上传地址

// 数据模型
const formData = reactive({
    title: '',
    images: [] as string[],
    dates: [{ date: '', price: '' }],
    content: ''
})

// 表单验证规则
const rules = {
    images: { required: true, message: '请上传2张缩略图', trigger: 'change' },
    title: { required: true, message: '请输入线路名称', trigger: 'blur' },
    dates: {
        required: true,
        message: '请填写至少一个日期和价格',
        validator: (rule: any, value: any[]) => {
            return value.every((item) => item.date && item.price)
        }
    },
    content: { required: true, message: '请填写线路详情', trigger: 'change' }
}

// 编辑器配置（适配微信小程序）
const editorSettings = {
    showLink: false,
    showEmoji: false,
    showImgSize: true,
    showImgToolbar: true,
    enableLink: true,
    enableEmoji: true
}

// 添加日期
const addDate = () => {
    formData.dates.push({ date: '', price: '' })
}

// 删除日期
const removeDate = (index: number) => {
    formData.dates.splice(index, 1)
}

// 图片上传成功
const handleImageSuccess = (res: any, index: number) => {
    formData.images[index] = res.url
}

// 图片删除
const handleImageDelete = (index: number) => {
    formData.images.splice(index, 1)
}

// 提交审核
const submit = async () => {
    try {
        const valid = await formRef.value.validate()
        if (!valid) return

        // 构造请求体
        const payload = {
            ...formData,
            images: formData.images.join(','), // 转为逗号分隔字符串
            dates: formData.dates.map((item) => ({
                date: item.date,
                price: Number(item.price)
            }))
        }

        // 调用接口
        // await uniService.post('/route/submit', payload)

        uni.showToast({ title: '提交成功' })
        setTimeout(() => uni.navigateBack(), 1500)
    } catch (err) {
        uni.showToast({ title: '提交失败', icon: 'none' })
    }
}
</script>

<style scoped lang="scss">
.container {
    background-color: #fff;
    padding: 20rpx;
}

// SCSS 样式优化
.date-price-list {
    .date-price-item {
        margin-bottom: 30rpx;
        align-items: center;
    }

    .u-field {
        padding: 0;
        height: 80rpx;

        .u-input__input {
            font-size: 26rpx;
            height: 80rpx;
        }
    }

    .flex-1 {
        flex: 1;
        min-width: 200rpx;
    }

    .mr-10 {
        margin-right: 20rpx;
    }

    .date-price-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 120rpx;
    }
}

.date-price-item {
    margin-bottom: 30rpx;

    .u-field {
        margin-bottom: 20rpx;
    }

    .u-button {
        margin-top: 10rpx;
    }
}
</style>
